<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
        >
            <el-form-item label="限制时间" prop="limitTime">
                <el-switch
                    v-model="limitTime"
                    inline-prompt
                    active-text="限制时间"
                    inactive-text="不限制时间"
                    style="
                        --el-switch-on-color: #13ce66;
                        --el-switch-off-color: #ff4949;
                    "
                />
            </el-form-item>

            <el-form-item
                label="过期时间"
                label-width="140px"
                prop="expireInTime"
                v-if="limitTime"
            >
                <el-date-picker
                    v-model="expireInTime"
                    type="datetime"
                    format="YYYY/MM/DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                    placeholder="选择令牌桶过期时间"
                    :shortcuts="shortcuts"
                />
            </el-form-item>
            <el-form-item label="描述" prop="describe">
                <el-input
                    v-model="describe"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import {
    reactive,
    toRefs,
    ref,
    defineProps,
    defineEmits,
    onMounted,
} from "vue";

const rules = {
    describe: [
        {
            required: true,
            message: "请选择输入令牌桶描述",
            trigger: "blur",
        },
    ],
    expireInTime: [
        {
            required: true,
            message: "请选择过期时间",
            trigger: "blur",
        },
    ],
};
const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const shortcuts = [
    {
        text: "一周",
        value: () => {
            const date = new Date();
            date.setDate(date.getDate() + 7);
            return date;
        },
    },
    {
        text: "三个月",
        value: () => {
            const date = new Date();
            date.setFullYear(
                date.getFullYear(),
                date.getMonth() + 3,
                date.getDate(),
            );
            return date;
        },
    },
    {
        text: "一年",
        value: () => {
            const date = new Date();
            date.setFullYear(
                date.getFullYear() + 1,
                date.getMonth(),
                date.getDate(),
            );
            return date;
        },
    },
];
const closeDialog = () => {
    emit("closeDialog", false);
};
const formRef = ref(null);

const form = reactive({
    appKey: "",
    appSecret: "",
    usedByClientId: "",
    limitTime: false,
    expireInTime: "",
    describe: "",
});
const { appKey, appSecret, usedByClientId, limitTime, expireInTime, describe } =
    toRefs(form);

/**
 * @description: 初始化
 * @param {*}
 * @return {*}
 */
rowData.value &&
    ((appKey.value = rowData.value.appKey),
    (appSecret.value = rowData.value.appSecret),
    (usedByClientId.value = rowData.value.usedByClientId),
    (limitTime.value = !(
        rowData.value.expireInTime === undefined ||
        rowData.value.expireInTime == null
    )),
    (expireInTime.value = rowData.value.expireInTime),
    (describe.value = rowData.value.describe));
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            if (!form.limitTime) {
                // 不限时间
                form.expireInTime = null;
            }
            let res;
            if (title.value === "添加") {
                res =
                    await VE_API.cloudNetwork.lazyNettyClientTokenBucketProviderSave(
                        form,
                    );
            } else {
                res =
                    await VE_API.cloudNetwork.lazyNettyClientTokenBucketProviderUpdate(
                        {
                            appKey: rowData.value.appKey,
                            ...form,
                        },
                    );
            }
            const { code } = res;
            if (code === 0) {
                closeDialog();
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
onMounted(async () => {});
</script>

<style lang="scss" scoped></style>
